<template>
    <div class="selectUser">
        <el-form>
            <el-form-item>
                <el-radio-group v-model="radio">
                    <el-radio label="1">添加部门</el-radio>
                    <el-radio label="2">添加角色</el-radio>
                    <el-radio label="3">添加人员</el-radio>
                    <el-radio label="4">添加发起人</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="选择部门" v-if="radio == '1'">
                <el-select class="dept" v-model="deptValue" multiple filterable placeholder="请选择部门">
                    <el-option v-for="item in deptList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择角色" v-else-if="radio == '2'">
                <el-select class="dept" v-model="roleValue" multiple filterable placeholder="请选择角色">
                    <el-option v-for="item in roleList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择人员" v-else-if="radio == '3'">
                <el-select class="dept" v-model="userValue" multiple filterable placeholder="请选择人员">
                    <el-option v-for="item in userList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选择发起人" v-else-if="radio == '4'">
                <el-select class="dept" v-model="initUserValue" multiple filterable placeholder="请选择人员">
                    <el-option v-for="item in initUserList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button @click="commit">关闭</el-button>
        </div>
    </div>
</template>
  
<script>
import { queryUserByName, queryRoleByName, queryDeptByName } from "@/api/activiti/customprocess"
export default {
    name: 'selectUser',
    props: {
        valueList: {
            type: Array,
        },
        valueType: {
            type: String
        },
        isMulti: {
            type: String
        }
    },
    data() {
        return {
            radio: "1",
            deptList: [{
                key: '0',
                value: "1",
                label: '会签'
            },
            {
                key: '1',
                value: "0",
                label: '不是会签'
            }],
            initUserList: [
                {
                    key: '0',
                    value: "${applyUserId}",
                    label: '发起人'
                }
            ],
            roleList: [{
                key: '0',
                value: "1",
                label: '会签'
            },
            {
                key: '1',
                value: "0",
                label: '不是会签'
            }],
            initUserValue: '',
            userList: [],
            roleValue: '',
            userValue: '',
            deptValue: ''
        }
    },
    mounted() {
        console.log('selectUser: mounted')
        this.init()
    },
    methods: {
        async init() {
            let userResponse = await queryUserByName('')
            this.userList = userResponse.data.map(item => {
                return { value: item.userName, key: item.userName, label: item.nickName }
            })
            console.log("selectUser: userList", this.userList)
            let deptResponse = await queryDeptByName("")
            this.deptList = deptResponse.data.map(item => {
                return { value: item.deptKey, key: item.deptKey, label: item.deptName }
            })
            let roleResponse = await queryRoleByName("")
            this.roleList = roleResponse.data.map(item => {
                return { value: item.roleKey, key: item.roleKey, label: item.roleName }
            })
            if (this.valueType == '1') {
                this.deptValue = this.valueList
            } else if (this.valueType == '2') {
                this.roleValue = this.valueList
            } else if (this.valueType == '3') {
                this.userValue = this.valueList
            } else if (this.valueType == '4') {
                this.initUserValue = this.valueList
            }
            this.radio = this.valueType
        },
        commit() {
            if (this.radio == '1') {
                let deptLabels = this.deptValue
                    .flatMap(o => this.deptList.find(i => i.value == o))
                    .map(e => e.label)
                let deptStrLabel = deptLabels.join()
                let deptStrValue = this.deptValue.join()
                console.log('selectUser: dept select value', deptStrValue, ' lables ', deptStrLabel)
                this.$emit('callBack', this.isMulti, this.radio, deptStrValue, deptStrLabel)
            } else if (this.radio == '2') {
                let roleLabels = this.roleValue
                    .flatMap(o => this.roleList.find(i => i.value == o))
                    .map(e => e.label)
                let roleStrLabel = roleLabels.join()
                let roleStrValue = this.roleValue.join()
                console.log('selectUser: role select value', roleStrValue, ' lables ', roleStrLabel)
                this.$emit('callBack', this.isMulti, this.radio, roleStrValue, roleStrLabel)
            } else if (this.radio == '3') {
                let userLabels = this.userValue
                    .flatMap(o => this.userList.find(i => i.value == o))
                    .map(e => e.label)
                let userStrLabel = userLabels.join()
                let userStrValue = this.userValue.join()
                console.log('selectUser: user select value', userStrValue, ' lables ', userStrLabel)
                this.$emit('callBack', this.isMulti, this.radio, userStrValue, userStrLabel)
            } else if (this.radio == '4') {
                let userStrLabel = this.initUserList.find(i => i.value == this.initUserValue).label
                let userStrValue = this.initUserValue.join()
                console.log('selectUser: user select value', userStrValue, ' lables ', userStrLabel)
                this.$emit('callBack', this.isMulti, this.radio, userStrValue, userStrLabel)
            } else {
                this.$emit('callBack', "", "", "", "")
            }
        }
    }
}
</script>
<style  scoped>
.selectUser {
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>
  